<template>
  <div id="Login">
    <vue-particle-line>
      <div class="Login_box">
        <transition name="el-fade-in-linear">
          <el-card class="box-card" shadow="hover" style="text-align: center">
            <div slot="header" class="clearfix" style="text-align: center">
              <h2 style="font-size: 1.4rem">校园疫情防控系統</h2>
            </div>
            <!-- 表单区域 -->
            <el-form
              :model="ruleForm"
              status-icon
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <!-- 账号 -->
              <el-form-item prop="username" label-width="auto">
                <el-input
                  prefix-icon="el-icon-user-solid"
                  v-model="ruleForm.username"
                  placeholder="请输入用户名"
                  class="inp"
                ></el-input>
              </el-form-item>
              <!-- 密码 -->
              <el-form-item prop="password" label-width="auto">
                <el-input
                  prefix-icon="el-icon-lock"
                  placeholder="password"
                  v-model="ruleForm.password"
                  show-password
                  class="inp"
                ></el-input>
              </el-form-item>
              <!-- 选择类型 -->
              <el-form-item label-width="auto">
                <el-radio-group v-model="ruleForm.radiosNumber" size="small">
                  <el-radio label="3" border>管理员</el-radio>
                  <el-radio label="1" border>学生</el-radio>
                  <el-radio label="2" border>教师</el-radio>
                </el-radio-group>
              </el-form-item>
              <!-- 登录 -->
              <el-button
                type="primary"
                class="button"
                size="middle"
                @click="login"
                >登录</el-button
              >
            </el-form>
          </el-card>
        </transition>
      </div>
    </vue-particle-line>
  </div>
</template>
<script>
import { loginApi } from "../../api/index";
import _debounce from "../../utils/_debounce.js";
export default {
  name: "Login",
  data() {
    return {
      ruleForm: {
        username: "admin",
        password: "123456",
        radiosNumber: "3",
      },
    };
  },
  methods: {
    //登录
    login: _debounce(async function () {
      const username = !this.ruleForm.username.trim();
      const passowrd = !this.ruleForm.password.trim();
      if (username || passowrd) {
        this.$message({
          showClose: true,
          message: "请输入正确的账号或密码",
          type: "error",
        });
        return;
      }
      //获取用户信息
      const user = {
        username: this.ruleForm.username.trim(),
        password: this.ruleForm.password.trim(),
        type: this.ruleForm.radiosNumber,
      };
      const result = await loginApi(user);
      console.log(result);
      //存token
      result.token && localStorage.setItem("token", result.token);
      result.status !== 200
        ? this.$message({
            showClose: true,
            message: "用户名或密码错误",
            type: "error",
          })
        : this.$notify({
            type: "success",
            title: "登录成功",
            message: "登录成功",
            position: "bottom-right",
          });
      this.$router.push("/main");
    }, 500),
  },
};
</script>

<style scoped lang="less">
//element 样式修改区
/deep/ .el-card__body {
  padding: 10px 30px 30px 30px;
}
.el-form-item {
  margin-bottom: 6px;
}
//组件样式区
#Login {
  height: 100vh;
  width: 100vw;
  background: rgb(95, 102, 155);
  .Login_box {
    position: fixed;
    z-index: 10;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 450px;
    height: 350px;
    .box-card {
      width: 450px;
      height: 350px;
      background-color: rgb(241, 241, 235);
      .clearfix {
        height: 25px;
        h2 {
          text-align: center;
          height: 25px;
          line-height: 25px;
          color: rgb(92, 92, 92);
        }
      }

      .el-radio-group {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-top: 20px;
        .el-radio {
          display: flex;
          justify-content: center;
          width: 120px;
        }
      }
    }
  }
  .inp {
    margin-top: 10px;
  }
  .button {
    margin-top: 20px;
    width: 180px;
  }
}
</style>
